<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 重置css样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 导入进度条 -->
    <link rel="stylesheet" href="./css/nprogress.min.css">
    <script src="./js/nprogress.min.js"></script>
    <!-- 导入axios -->
    <script src="./js/axios.min.js"></script>
    <!-- 导入axios二次封装 -->
    <script src="./js/request.js"></script>
    <!-- 导入detail.js => 统一封装detail页面的所有请求 -->
    <script src="./api/detail.js"></script>
    <!-- 导入detail的css -->
    <link rel="stylesheet" href="./css/detail.min.css">
</head>

<body>
    <div class="detail">
        <div class="content">
            <div class="avatar">
                <img src="./img/3.png" alt="">
            </div>
            <p>姓名: 张三</p>
            <p>性别: 男</p>
            <p>年龄: 18</p>
            <p>邮箱: 371900521@qq.com</p>
            <p>班级: 1班</p>
            <p>学科: H5前端</p>
        </div>
        <div class="footer" onclick="window.location.href = './message.html'">
            联&emsp;系
        </div>
    </div>
    <script>
        /* 
            获取传送过来的ID => 根据ID向服务器发送请求,获取学生和班级信息
            从服务器里面拿到班级和学生信息
            渲染
        */
        window.onload = function () {
            const content = document.querySelector(".content")
            const id = window.location.search.slice(4);
            getqueryone(id)
                .then(res => {
                    let str = `
                    <div class="avatar">
                        <img src="${res.msg.url}" alt="">
                    </div>
                    <p>姓名: ${res.msg.sname}</p>
                    <p>性别: ${res.msg.gender}</p>
                    <p>年龄: ${res.msg.age}</p>
                    <p>邮箱: ${res.msg.email}</p>
                    <p>班级: ${res.msg.cname}</p>
                    <p>学科: ${res.msg.subject}</p>
                    `
                    content.innerHTML = str;
                })
        }
    </script>
</body>

</html>